<script setup lang="ts">
import RightTitle from './RightTitle.vue'
import charts from '../../components/charts.vue'
import {getHydroelectric} from '../../request/air'
import {ref} from 'vue'
import {barOption} from '../../utils/option'
import resize from '../../hook/Resize'
resize()
// 定义唯一标识符
let key = ref(0)
// 总用水量
const totalWater = ref(0)
const totalDian = ref(0)
// 发送请求获取option的数据
getHydroelectric().then(resp => {
    // console.log('111', resp);
    let data = resp.data.data.result[0]
    // console.log('222', data);
    // 修改option
    barOption.xAxis = data.yAxis
    barOption.series = data.series
    key.value = +new Date()
    data.series.forEach((item: { name: string; data: any[] }) => {
        if (item.name != '安防设备用电') {
            totalWater.value += item.data.reduce((a, b) => a + b)
        } else {
            totalDian.value += item.data.reduce((a, b) => a + b)
        }
    })
})

</script>

<template>
    <div class="container">
        <!-- 标题 -->
        <Right-Title title="水电用量"></Right-Title>
        <!-- 下面图表部分 -->
        <div class="mycharts">
            <!-- 上面的盒子 -->
            <div class="title">
                <div>
                    <img src="../../assets/用电量.png" alt="">
                    <span>总用电量{{totalWater}}</span>
                </div>
                <div>
                    <img src="../../assets/用水量.png" alt="">
                    <span>总用水量{{totalDian}}</span>
                </div>
            </div>
            <!-- 图表 -->
            <div class="echarts">
                <charts ref="mycharts" :option="barOption" :key="key"></charts>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container{
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 40%;
    padding: 0 50px 0 70px;
    box-sizing: border-box;
    .mycharts{
    background-color: rgba(120,120,120,.1);
        height: 100%;
        color: #fff;
        .title{
            height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            >div{
                border: 3px solid #518181;
                height: 100%;
                line-height: 40px;
                text-align: center;
                padding: 0 4px;
                font-size: 16px;
                img{
                    vertical-align: middle;
                    position: relative;
                    top: -2px;
                    margin-right: 4px;
                    width: 20px;
                    height: 20px;
                }
            }
        }
        .echarts{
            height: 86%;
            margin-top: 6px;
        }
    }
}
</style>